<template>
	<view class="hangqing">
		<view class="box"><QSTabs activeColor="#3a73fe" :current="current_1" :tabs="tabs_1" width="375" @change="change($event, '1')" /></view>
		<view class="title">
			<view class="title1">交易产品（点差）</view>
			<view class="title2">卖出价</view>
			<view class="title3">买入价</view>
		</view>
		<view class="info" v-if="current_1 == 0"><hg-list :list="list1"></hg-list></view>
		<view class="info" v-if="current_1 == 1"><hg-list :list="list2"></hg-list></view>
	</view>
</template>

<script>
import { login, ticker } from '../../../server/api.js';
import QSTabs from '@/components/QS-tabs/QS-tabs.vue';
import hgList from '@/components/hg-list/hg-list.vue';
import { baseUrl } from '../../../server/api.config';
export default {
	components: {
		hgList,
		QSTabs
	},
	data() {
		return {
			current_1: 0,
			tabs_1: ['自选', '数组货币'],
			list1: [
				{
					name: 'OX币',
					name1: 'OXUSD(2.0)',
					isRed: false,
					maichu: '7324.0',
					mairu: '7326.0'
				},
				{
					name: 'OX币',
					name1: 'OXUSD(2.0)',
					isRed: true,
					maichu: '7324.0',
					mairu: '7326.0'
				}
			],
			list2: [
				{
					name: 'OX币',
					name1: 'OXUSD(2.0)',
					isRed: true,
					maichu: '7324.0',
					mairu: '7326.0'
				}
			]
		};
	},
	created() {
		// console.log(22)
		// this.dataInit();
	},
	onLoad() {
		this.getTicker();
		let that = this;
		setInterval(() => {
			// 定时调用
			that.getTicker();
		}, 5000);
	},
	methods: {
		getTicker() {
			console.log(baseUrl);
			let that = this;
			uni.request({
				method: 'GET',
				url: baseUrl + '/api/swap/v3/instruments/ticker',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: {},
				success: function(res) {
					that.list2 = res.data;
					console.log(res);
					if (that.current_1 == 0) {
						uni.getStorage({
							key: 'UserInfo',
							success: function(user) {
								let userId = user.data.data[0].UserId;
								that.getOptionTicker(userId, res.data);
							}
						});
					}
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},
		getOptionTicker(userId, tickerList) {
			// 获取自选
			let that = this;
			let params = {};
			params.user_id = userId;
			console.log(userId);

			uni.request({
				method: 'POST',
				url: baseUrl + '/api/Users/OptionalAll',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: params,
				success: function(res) {
					console.log(res);
					let optionList = [];
					res.data.data.forEach(val => {
						//得到自选数据信息
						tickerList.forEach(ticker => {
							if (val == ticker.instrument_id) {
								optionList.push(val);
							}
						});
					});
					console.log(optionList);
					that.list1 = optionList;
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},
		change(index, i) {
			//
			this['current_' + i] = index;
		}
	}
};
</script>

<style lang="less">
.hangqing {
	.title {
		font-size: 24upx;
		display: flex;
		padding: 16upx 26upx;
		margin-top: 16upx;
		color: #979797;
		background-color: #f6f6f6;
		.title1 {
			flex: 2;
			text-align: left;
		}
		.title2 {
			flex: 1;
			text-align: left;
		}
		.title3 {
			flex: 1;
			text-align: right;
			padding-right: 10upx;
		}
	}
	.info {
	}
}
</style>
